<template>
    <el-dialog title="历史设置参数" :visible.sync="visible" width="1030px" append-to-body>
        <BasePage style="border: 0; box-shadow: none; padding: 0">
            <!--数据列表区-->
            <BaseTable slot="table" v-loading="listLoading" :columns="columns" :data="list" row-key="id" height="500px" highlight-current-row>
                <template #index="{ scope: { $index } }">
                    <span>{{ $index + 1 + (page.pageNo - 1) * page.pageSize }}</span>
                </template>
                <template #header="scope">
                    <span v-html="scope.label"></span>
                </template>
                <template #handle="{ scope: { row } }">
                    <BaseButton v-permission="{ btnCode: '' }" type="text" @click="handleEffect(row)">再次生效</BaseButton>
                </template>
            </BaseTable>
            <!--分页组件-->
            <Pagination
                slot="pagination"
                :current-page.sync="page.pageNo"
                :page-size.sync="page.pageSize"
                :total="page.total"
                @current-change="getList"
                @size-change="getList"
            />
        </BasePage>
    </el-dialog>
</template>

<script>
import BasePage from '@/layouts/BasePage'
import { PerformancePredictionModel } from '@/models'
import { DirectionOptions } from '@/config/constants'
import { RoadTypeOptions, TechnicalIndexOptions, DataRangeOptions, TestTypeOptions } from '@/views/technical-evaluation/constants'

const nowYear = new Date().getFullYear().toString() + '年路网检测'

export default {
    name: 'HistoryDialog',
    components: {
        BasePage
    },
    data() {
        return {
            RoadTypeOptions,
            DirectionOptions,
            DataRangeOptions,
            TechnicalIndexOptions,
            TestTypeOptions,
            model: new PerformancePredictionModel(),
            visible: false,
            submitLoading: false,
            datePickerOptions: {
                disabledDate(date) {
                    return date.getFullYear() > new Date().getFullYear()
                }
            },
            current: 1,
            monitoringCenterOptions: [],
            listLoading: true,
            list: [],
            page: {
                pageNo: 1,
                pageSize: 10,
                total: 0
            },
            columns: [],
            id: null
        }
    },
    methods: {
        getList() {
            this.listLoading = true
            this.model
                .getHistoryList({ modelId: this.id, ...this.page })
                .then((res) => {
                    this.list = res.list.map((item) => {
                        return {
                            ...item,
                            ...JSON.parse(item.parameter || '{}')
                        }
                    })
                    this.setColumns(res.parameters || [])
                    this.page.total = res.totalCount
                })
                .finally(() => {
                    this.listLoading = false
                })
        },
        setColumns(list) {
            const arr = []
            list.forEach((item) => {
                if (item.includes('</')) {
                    arr.push({
                        attrs: {
                            prop: item,
                            label: item,
                            'show-overflow-tooltip': true,
                            width: '90'
                        },
                        headerSlot: 'header'
                    })
                } else {
                    arr.push({
                        attrs: {
                            prop: item,
                            label: item,
                            'show-overflow-tooltip': true,
                            width: '70'
                        }
                    })
                }
            })
            arr.unshift(
                {
                    slot: 'index',
                    attrs: {
                        type: 'index',
                        label: '序号',
                        width: '70'
                    }
                },
                {
                    attrs: {
                        prop: 'technicalIndicators',
                        label: '技术指标',
                        'show-overflow-tooltip': true,
                        'min-width': '100'
                    }
                },
                {
                    attrs: {
                        prop: 'aadt',
                        label: 'AADT',
                        'show-overflow-tooltip': true,
                        'min-width': '100'
                    }
                }
            )
            arr.push(
                {
                    attrs: {
                        prop: 'updateUserName',
                        label: '修改人',
                        'show-overflow-tooltip': true,
                        'min-width': '120'
                    }
                },
                {
                    attrs: {
                        prop: 'updateTime',
                        label: '修改时间',
                        'show-overflow-tooltip': true,
                        'min-width': '140'
                    }
                },
                {
                    slot: 'handle',
                    attrs: {
                        label: '操作',
                        width: '140',
                        fixed: 'right'
                    }
                }
            )
            this.columns = arr
        },
        open(id) {
            this.id = id
            this.page.pageNo = 1
            this.getList()
            this.visible = true
        },
        handleEffect(row) {
            const data = {
                parameter: row.parameter,
                modelId: row.modelId,
                id: row.id,
                technicalIndicators: row.technicalIndicators,
                aadt: row.aadt
            }
            this.model.handledAgainUsed(data).then(() => {
                this.$message.success('操作成功')
                this.$emit('success', { technicalIndicators: row.technicalIndicators, aadt: row.aadt })
                this.visible = false
            })
        }
    }
}
</script>

<style lang="scss" scoped>
</style>
